<template>
    <div>
        <div class="container">
            <ul v-for="(item, index) of list" :key="index" class="ul-container">
                <li class="ticketClass">
                    <span class="ticketype-ticket"></span>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.title}}
                    <div v-if="item.children">
                        <detail-list class="children" :list="item.children"></detail-list>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
  name: 'DetailList',
  props: {
    list: {
      type: Array
    }
  }
}
</script>

<style scoped lang="stylus">
    .ul-container
        margin-bottom: 0.2rem
        .ticketClass
            background-color: #ffffff
            color: #333
            font-size: .3rem
            line-height: .86rem
            text-indent: .3rem
            position: relative
            border-top: 0.005rem #e0e0e0 solid
            .ticketype-ticket
                position: absolute
                top: 0.24rem
                width: 0.36rem
                height: 0.36rem
                margin-left: .1rem
                background: url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0rem -0.45rem no-repeat;
                background-size: .4rem 3rem
            .children
                padding-left: 0.3rem
                .ticketClass
                    text-indent: 0rem
                    .ticketype-ticket
                        background: none
</style>
